import { 
  useState,
  lazy, // 懒加载
  Suspense
 } from 'react'
import './App.css'
import {
  BrowserRouter as Router,
  Routes,
  Route
} from 'react-router-dom'
import Navigation from './components/Navigation'
import ProtectedRoute from './pages/ProtectedRoute'
import Pay from './pages/Pay'

// import Home from './pages/Home'
// import About from './pages/About'

// 函数 路由 -> Route
// 懒加载
const Home = lazy(() => import('./pages/Home'))
const About = lazy(() => import('./pages/About'))
const NotFound = lazy(() => import('./pages/NotFound'))
const Login = lazy(() => import('./pages/Login'))

function App() {

  return (
    <>
      <Router>
        <Navigation />
        <Suspense fallback={<div>loading...</div>}>
          <Routes>
            <Route path='/' element={<Home />} />
            <Route path='/about' element={<About />} />
            <Route path='/login' element={<Login />} />
            {/* 鉴权 */}
            <Route path='/pay' element={
            <ProtectedRoute>
              <Pay />
              {/* <div>123</div> */}
            </ProtectedRoute>
            } />
            <Route path='*' element={<NotFound />} />
          </Routes>
        </Suspense>
      </Router>
    </>
  )
}

export default App
